<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 

/* 分页 end */


</style>

<template>
    <div class="employee-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="search">
                <span>快速搜索</span>
                <Input v-model="searchForm.job_code" clearable placeholder="请输入代理人工号" style="width: 140px"></Input>
                <Input v-model="searchForm.name" clearable placeholder="请输入代理人姓名" style="width: 140px"></Input>
                <DatePicker type="month" :options="options" v-model="searchForm.datetime" transfer format="yyyy-MM" placeholder="选择日期" style="width: 120px" @on-change="datachange($event,searchForm,'date')"></DatePicker>
                <Button type="primary" @click='search'>查询</Button>
            </div>
            <div class="detail" ref="detail">
                <Row>
                    <Col span="24" class="table-action" >
                        <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                            <span class="clear"></span>
                            <Button type="info" size="large" v-if="$isShow('settlement/batch_export')" class="fr" icon="icon iconfont icon-riqi"  @click="exportList">导出报表</Button>
                        </div> 
                    </Col> 
                </Row>
                <div class="headline">                   
                      
                </div>
                <div class="clearfix">
                    <Table border :columns="columns_employee" height="521" :data="data_employee"></Table>
                    <Row class="page fr">
                        <Col span="24">
                            <Page :total="employeeTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
        <!--  导出报表 -->
        <Modal v-model="exportModal" :mask-closable='closeable' width="600" title="导出报表" @on-ok="exportOk" :loading="loading">
            <Row class="common-box-body">
                <Col span="18" offset="3" class="search-form">                
                    <Form :model="exportForm"  :rules="exportValidate">
                        <div class="mb24">
                            <Form-item label="选择机构" >
                                <Select multiple :disabled="!$accountType.filter_org?true:false" filterable  placeholder="请输入分支机构" v-model="exportForm.yun_org_mid" :transfer=true >
                                    <Option v-for="item in orglist" :value="item.id" :key="item.id">{{item.shortn}}</Option>                                                                                                                                       
                                </Select>
                            </Form-item> 
                        </div> 
                        <div  class="mb24">
                             <Form-item label="结算月份" prop="datetime">
                                <DatePicker type="month" v-model="exportForm.datetime" transfer @on-change="datachange($event,exportForm,'date')"  placeholder="选择导出月份" ></DatePicker>
                            </Form-item>
                        </div>                               
                       
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getPayrollList} from '../../api/achievement'
import { getSalaryList , batchExport } from '../../api/settlement'
import { getListByName } from '../../api/yun_org'
import { formatTime } from '../../libs/time'
export default {
    data() {
        return {
            exportForm:{
                datetime:formatTime(new Date(),'yyyy-MM'),
                date:formatTime(new Date(),'yyyy-MM'),

                yun_org_mid:[],
            },
            exportValidate:{
                datetime: [
                    { required: true, type: 'date', message: '选择导出月份', trigger: 'change' }
                ], 
            },
            exportModal:false,
            closeable:false,
            loading:true,
            options: {
                disabledDate (date) {
                    let _date = formatTime(new Date(),'yyyy-MM')
                    console.log(new Date(_date).getTime() - 86400000)
                    return date && date.valueOf() >= (new Date(_date).getTime() - 86400000)
                    //return date 
                }
            },
            orglist:[],
            page: 1,
            pagesize: 10,
            searchForm: {
                name: '',
                date:'',
                datetime:formatTime(new Date(new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000),'yyyy-MM'),
                //datetime:new Date(formatTime(new Date(),'yyyy-MM')),
            },
 
            employeeTotal: 0,
            columns_employee: [
                {
                    title: '工号',
                    key : 'job_code',
                    width : 100,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '姓名',
                    key: 'name',
                    width:100,
                    align: 'center',
                    fixed: 'left'
                },
                // {
                //     title: '总计',
                //     key: 'total_salary',
                //     align: 'center',
                // },
                // {
                //     title: '操作',
                //     key: 'action',
                //     width: 150,
                //     align: 'center',
                //     render: (h, params) => {
                //         return h('div', [
                //             h('a', {
                //                 attrs: {
                //                     //href: 'http://localhost:8080/#/finance/payroll_detail/'+params.row.name+','+params.row.year+','+params.row.month+','+params.row.uid,
                //                     href: 'http://biz.kuaibao365.com/#/finance/payroll_detail/'+params.row.name+','+params.row.year+','+params.row.month+','+params.row.uid,
                //                     target:'_blank'
                //                 },
                //             }, '佣金单'),
                //         ]);
                //     }
                // },
            ],
            data_employee: [

            ],
            columnstag:true,
        }
    },
    components: {
        productTitle
    },
    created() {
        
        
    },
    mounted () {
        let _time = new Date(formatTime(new Date(),'yyyy-MM')).getTime() - 86400000
        this.searchForm.date =formatTime(new Date(_time),'yyyy-MM') 
        this.getList();
        this.orglistinit();
    },
    computed: {
        get_yun_id(){
            return this.$store.state.user.id
        },  
    },
    methods: {
        exportList(){          
          this.exportModal = true  
        },
        orglistinit(){
            new Promise((resolve, reject) => {
            let _params = {
                name:''
            }
            getListByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {               
                        this.orglist = response.data.data;
                        
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        exportOk(){
            new Promise((resolve,reject)=>{
                batchExport(this.exportForm).then(response=>{
                    if(response.data.err == 0){
            //             adPopup.blur();
            // 　　　　    adPopup.opener.focus();
            // 　　　　　　adPopup.location = response.data.data.url;
                        // var newWindow = window.open();
                        // newWindow.location.href = response.data.data.url;
                        var iframe = document.createElement('iframe'); 
                        iframe.style.display = 'none';
                        iframe.src=response.data.data.url;  
                        document.body.appendChild(iframe);
                        //window.open(response.data.data.url)
                    }else{
                        this.$Message.error(response.data.info)
                    }
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }, 2000);
                    resolve();
                }).catch(error=>{
                    reject(error);
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }, 2000);
                })
            })
            // setTimeout(() => {
            //     this.loading = false;
            //     this.$nextTick(() => {
            //         this.loading = true;
            //     });
            // }, 2000);
            // var _exprot_arry = '';
            // if(this.exportForm.yun_org_mid.length > 0){
            //     _exprot_arry = this.exportForm.yun_org_mid.join("_")
            // }
            // console.log(_exprot_arry)
            // window.open('http://test.kuaibao365.com/batch_export/export_salary?date='+this.exportForm.date+'&owner_id='+this.get_yun_id+'&yun_org_mid='+_exprot_arry)
        },
        // 搜索
        search() {
            this.getList();
        },
        //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
        // 获取员工列表
        getList() {
            let _params = {
                'p': this.page,
                'pagesize': this.pagesize,
                'date': this.searchForm.date,
                'name': this.searchForm.name,
                'job_code': this.searchForm.job_code,               
                // 'rank': this.searchForm.rank,
                // 'agency_name':this.searchForm.agency_name,
                // 'sex':this.searchForm.sex,
            }
            new Promise((resolve, reject) => {
                getSalaryList(_params).then(response => {
                    console.log(response.data);
                    if (response.data.err == 0) {
                        this.data_employee = response.data.data.list;
                        this.employeeTotal = response.data.data.total;
                        if(response.data.data.columns.length > 0&&this.columnstag){
                            this.columns_employee.splice(2,0,...response.data.data.columns)
                            this.columnstag = false
                        }                        
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

        // 页码改变
        pageChange(page) {
            this.page = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList();
        },

    }
}
</script>
